<template>
  <div class="product">
    <!-- 顶部 -->
    <van-nav-bar
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon
          name="share-o"
          size="18"
        />
      </template>
    </van-nav-bar>

    <!-- 主图 -->
    <div class="img">
      <img
        :src="goodInfo.goodsCoverImg"
        alt=""
      >
    </div>

    <!-- 手机名称 -->
    <div class="phoneName">
      {{goodInfo.goodsName}}
    </div>

    <!-- 手机 -->
    <div class="product-desc">
      免邮费 顺丰快递
    </div>

    <!-- 价格 -->
    <div class="goodprice">
      ¥ {{goodInfo.sellingPrice}}
    </div>

    <!-- 信息 -->
    <div class="message">
      <ul>
        <li>概述</li>|
        <li>参数</li>|
        <li>安装服务</li>|
        <li>常见问题</li>
      </ul>
    </div>

    <!-- 详细情况 -->
    <div
      class="imgDetail"
      v-html="goodInfo.goodsDetailContent"
    >
    </div>

    <!-- 提交按钮 -->
    <van-goods-action class="goodAction">
      <van-goods-action-icon
        icon="chat-o"
        text="客服"
        dot
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="goodount"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { Toast } from "vant";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      id: this.$route.params.id,
      goodInfo: {},
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("分享");
    },
    async getDetail() {
      const res = await this.$http.getDetail(this.id);
      this.goodInfo = res.data.data;
      console.log(this.goodInfo);
    },
    // 加入购物车
    addCart() {
      const goodMessage = {
        id: this.id,
        completed: true,
        src: this.goodInfo.goodsCoverImg,
        count: 1,
        price: this.goodInfo.sellingPrice,
        title: this.goodInfo.goodsName,
      };
      // console.log(this.goodInfo.sellingPrice)
      this.$store.dispatch("cart/addCart", goodMessage);
    },
  },
  computed: {
    ...mapGetters({
      goodount: "cart/getAllCount",
    }),
  },
  watch: {
    $route() {
      this.$router.go(0);
    },
  },
};
</script>
<style lang="scss">
.product {
  padding: 0 10px;
  .img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .phoneName {
    font-size: 16px;
    // text-align: center;
  }
  .product-desc {
    font-size: 12px;
    color: #ccc;
    margin: 5px 0;
  }
  .goodprice {
    color: #f63515;
    margin: 10px;
  }
  .message {
    ul,
    li {
      list-style: none;
    }
    ul {
      display: flex;
      justify-content: space-around;
    }
  }
  .imgDetail {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .goodAction {
    z-index: 100;
  }
}
</style>